<template>
    <i-button
        :class="buttonClass"
        :type="buttonType"
        :ghost="buttonGhost"
        @click="onClick"
        :style="dynaStyle"
        :disabled="disabled"
        :title="tooltip"
    >
        <menu-icon class="icon" :item="iconItem" />
        <span class="caption">{{ showCaption && caption ? caption : '' }}</span>
    </i-button>
</template>

<script lang="ts">
import { IPSAppDEUIAction } from '@ibiz/dynamic-model-api';
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppButton extends Vue {
    /**
     * 按钮模型数据
     *
     * @type {any}
     * @memberof AppButton
     */
    @Prop() public modelJson!: any;

    /**
     * 禁用状态
     *
     * @memberof AppButton
     */
    @Prop({ default: false }) public disabled?: boolean;

    /**
     * 加载状态
     *
     * @memberof AppButton
     */
    @Prop({ default: false }) public loadding?: boolean;

    /**
     * 动态样式
     *
     * @memberof AppButton
     */
    @Prop({ default: {} }) public dynaStyle?: any;

    /**
     * 动态样式类
     *
     * @memberof AppButton
     */
    @Prop({ default: {} }) public dynaClass?: any;

    /**
     * 按钮样式
     *
     * @memberof AppButton
     */
    get buttonClass() {
        let buttonClass = 'app-button ';
        if (this.dynaClass) {
            buttonClass += this.dynaClass;
        }
        return buttonClass;
    }

    /**
     * 按钮名称
     *
     * @memberof AppButton
     */
    public name: any;

    /**
     * 图标对象
     *
     * @memberof AppButton
     */
    public iconItem: any;

    /**
     * 显示提示
     *
     * @memberof AppButton
     */
    public tooltip: any;

    /**
     * 标题
     *
     * @memberof AppButton
     */
    public caption: any;

    /**
     * 显示标题
     *
     * @memberof AppButton
     */
    public showCaption: any;

    /**
     * 按钮绘制模式
     *
     * @memberof AppButton
     */
    public renderMode: 'BUTTON' | 'LINK' = 'BUTTON';

    /**
     * 按钮样式
     *
     * @memberof AppButton
     */
    public buttonStyle:
        | 'DEFAULT'
        | 'INVERSE'
        | 'PRIMARY'
        | 'INFO'
        | 'SUCCESS'
        | 'WARNING'
        | 'DANGER'
        | 'STYLE2'
        | 'STYLE3'
        | 'STYLE4' = 'DEFAULT';

    /**
     * 按钮类型
     *
     * @memberof AppButton
     */
    get buttonType() {
        if (Object.is(this.renderMode, 'LINK')) {
            return 'text';
        } else {
            if (
                Object.is(this.buttonStyle, 'DEFAULT') ||
                Object.is(this.buttonStyle, 'STYLE2') ||
                Object.is(this.buttonStyle, 'STYLE3') ||
                Object.is(this.buttonStyle, 'STYLE4')
            ) {
                return 'default';
            } else if (Object.is(this.buttonStyle, 'DANGER')) {
                return 'error';
            } else if (Object.is(this.buttonStyle, 'INVERSE')) {
                return 'primary';
            } else {
                return this.buttonStyle.toLowerCase();
            }
        }
    }

    /**
     * 按钮幽灵属性，使按钮背景透明
     *
     * @memberof AppButton
     */
    get buttonGhost() {
        return Object.is(this.buttonStyle, 'INVERSE');
    }

    /**
     * 按钮图标方向
     *
     * @memberof AppButton
     */
    public iconAlign: 'LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM' = 'RIGHT';

    /**
     * 初始化完成
     *
     * @memberof AppButton
     */
    public created() {
        if (this.modelJson) {
            let { caption, showCaption, name, tooltip } = this.modelJson;
            const uiAction = this.modelJson.getPSUIAction() as IPSAppDEUIAction;
            this.name = name;
            this.caption = this.$tl(uiAction?.getCapPSLanguageRes()?.lanResTag, caption);
            this.tooltip = this.$tl(uiAction?.getTooltipPSLanguageRes()?.lanResTag, tooltip);
            this.showCaption = showCaption;
            // 初始化图标对象
            const sysImage = this.modelJson.getPSSysImage();
            const actionImage = uiAction?.getPSSysImage();
            this.iconItem = {
                iconcls: sysImage?.cssClass || actionImage?.cssClass,
                icon: sysImage?.imagePath || actionImage?.imagePath,
            };
            if (this.modelJson.renderMode) {
                this.renderMode = this.modelJson.renderMode;
            }
            if (this.modelJson.buttonStyle) {
                this.buttonStyle = this.modelJson.buttonStyle;
            }
            if (this.modelJson.iconAlign) {
                this.iconAlign = this.modelJson.iconAlign;
            }
        }
    }

    /**
     * 点击按钮
     *
     * @param {*} event
     * @memberof AppButton
     */
    public onClick(event: any) {
        this.$emit('onClick', { detail: this.modelJson, event });
    }
}
</script>
<style lang='less'>
.app-button {
    .icon {
        padding-right: 6px;
    }
}
</style>